import React, { Component, lazy, Suspense } from 'react'
import { Route, Redirect, Switch } from 'react-router-dom'
import Loading from './components/loading'
// import Index from './views/index'
// import Login from './views/Login'
// import Reg from './views/Reg'
// import NotFount from './views/NotFound'

var Index = lazy(() => import('./views/index'))
var Login = lazy(() => import('./views/Login'))
var Reg = lazy(() => import('./views/Reg'))
var NotFount = lazy(() => import('./views/NotFound'))
var Details = lazy(()=> import('./views/details'))

export default class App extends Component {
    render() {
        return (
            <>
                {/* BrowserRouter ,HashRouter 路由管理组件必须包裹在路由组件外面 */}
                {/* 定义一级路由组件 */}
                {/*Route 用来定义路由规则,path指定路由地址，
            component指定路由地址对应的组件，
            Route组件本身就充当router-view的作用*/}
                {/* Switch 从上往下一次比较每个路由，一旦匹配到某条路由 则停止匹配，渲染匹配到的路由组件 */}
                {/* Redirect 路由重定向  exact 精确 */}
                {/* 404路由  path='*' 表示匹配任何其他路由 */}
                {/* 如果某个组件中有嵌套路由，则当前组件对应的路由规则就不能添加exact属性 */}
            <Suspense fallback={<Loading></Loading>}>

                    <Switch>
                        <Route path='/index' component={Index}></Route>
                        <Route path='/login' component={Login}></Route>
                        <Route path='/reg' component={Reg}></Route>
                        <Route path='/details/:id' component={Details}></Route>
                        <Redirect exact from='/' to='/login'></Redirect>
                        <Route path='*' component={NotFount}></Route>
                    </Switch>
                </Suspense>


            </>
        )
    }
}
